<template>
    <div class="platform">
        <my-tag title="发布材料" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="top" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="材料名称" prop="materialName">
                        <el-input v-model="form.materialName" placeholder="请输入材料名称" @focus="materialNameLimit = true"
                            @blur="materialNameLimit = false" :show-word-limit="materialNameLimit" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="材料简述" prop="materialBriefly">
                        <el-input v-model="form.materialBriefly" placeholder="请输入简述" @focus="materialBrieflyLimit = true"
                            @blur="materialBrieflyLimit = false" :show-word-limit="materialBrieflyLimit" maxlength="30" />
                    </el-form-item>
                    <el-form-item label="材料描述" prop="materialDesc">
                        <el-input type="textarea" :autosize="{ minRows: 8 }" v-model="form.materialDesc"
                            placeholder="请输入产品特点说明，详细的说明会得到更多" @focus="materialDescLimit = true"
                            @blur="materialDescLimit = false" :show-word-limit="materialDescLimit" maxlength="500" />
                    </el-form-item>
                    <el-form-item label="详细参数">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="ParamsName" label="名称" align="center" width="180">
                                <template #default="scope">
                                    <el-input v-model="scope.row.ParamsName" placeholder="请输入" maxlength="30"
                                        @focus="scope.row.ParamsNameLimit = true" @blur="scope.row.ParamsNameLimit = false"
                                        :show-word-limit="scope.row.ParamsNameLimit"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="description" label="描述" align="center">
                                <template #default="scope">
                                    <el-input type="textarea" v-model="scope.row.description" placeholder="请输入"
                                        maxlength="50" @focus="scope.row.descriptionLimit = true"
                                        @blur="scope.row.descriptionLimit = false"
                                        :show-word-limit="scope.row.descriptionLimit" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="60" align="center">
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-button class="default-btn-add" @click="onAddItem">
                            新增参数项
                        </el-button>
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="封面图片" prop="coverImage">
                        <div class="coverImg-style">
                            <image-upload v-model="form.coverImage" :limit="1" :showAddIcon="false">
                                <div>上传材料封面图</div>
                                <div style="font-size: 12px;color: #ACB3BD;line-height: 18px;">建议图片尺寸320*244px</div>
                            </image-upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="产品展示图" prop="materialShowcase">
                        <image-upload v-model="form.materialShowcase" :limit="3" />
                    </el-form-item>
                </div>
            </el-form>
            <div class="platform-submit-btn">
                <el-button type="primary" @click="submitForm">提交审核</el-button>
                <el-button class="default-btn" @click="cancel">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getPlatformMaterialDetail, editPlatformMaterialInfo } from '@/api/decor/materialSupplier.js'
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const tableData = ref([])
const materialNameLimit = ref(false)
const materialDescLimit = ref(false)
const materialBrieflyLimit = ref(false)
const data = reactive({
    form: {},
    rules: {
        materialName: [
            { required: true, message: "请输入材料名称", trigger: "blur" }
        ],
        materialBriefly: [{ required: true, message: "请输入材料简述", trigger: "blur" },],
        coverImage: [{ required: true, message: "请上传封面图", trigger: "change" }]
    }
});
const { form, rules } = toRefs(data);
// 参数详情删除按钮
const deleteRow = (index) => {
    tableData.value.splice(index, 1)
}
// 参数详情新增按钮
const onAddItem = () => {
    tableData.value.push({
        ParamsName: '',
        description: '',
        ParamsNameLimit: false,
        descriptionLimit: false,
    })
};
// 获取材料相信信息
// 获取详情
(() => {
    const materialId = route.params.materialId
    if (materialId) {
        getPlatformMaterialDetail(materialId).then((res) => {
            form.value = res.data
            let _Data = JSON.parse(res.data.materialParams)
            _Data.forEach((v) => {
                tableData.value.push({
                    ParamsName: v.ParamsName,
                    description: v.description,
                    ParamsNameLimit: false,
                    descriptionLimit: false,
                })
            })
        })
    }
})();
// 提交按钮
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            let _data = []
            tableData.value.forEach((v) => {
                _data.push({
                    ParamsName: v.ParamsName,
                    description: v.description,
                })
            })
            form.value.materialParams = JSON.stringify(_data)
            proxy.$modal.confirm('是否确认提交，确定后需等待管理员再次审核').then(function () {
                return editPlatformMaterialInfo(form.value);
            }).then(() => {
                proxy.$modal.msgSuccess("发布成功,请等待管理员审核");
                router.push('/materialMGT')
            }).catch(() => { });
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const cancel = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 10px 0 4px;
        }
    }
}

.default-btn-add {
    width: 60px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    width: 110px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #EF5A42;
    margin-top: 10px;
}

::v-deep(.el-button--primary.is-link, .el-button--primary.is-text) {
    width: 24px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    padding: 0;
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>